<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
        <view class="f__login">
            <view class="">
                <u--image :src="siteInfo.site.logo" mode="widthFix" width="120px" height="60px" radius="8"></u--image>
            </view>
            <!-- <view class="title">忘记密码~</view> -->
            <!-- <view class="desc">会员用户登录后消费可享受折扣，享受更好的服务体验</view> -->
            <!-- 验证码登录 -->
            <view class="loginPhone">
				<u--form labelPosition="top" :model="model" ref="uForm" labelWidth="90px" errorType="message">
                <u-form-item class="form-row" prop="email">
                    <u-input class="input" v-model="model.email" :placeholder="$t('email_mst')" placeholder-style="font-weight:normal;color:#bbbbbb;"></u-input>
                </u-form-item>
                <u-form-item class="form-row" prop="vCode" style="position: relative;">
                    <u-input class="input" type="number" maxlength="4" prop="vCode" v-model="model.vCode" :placeholder="$t('verificode_input')" placeholder-style="font-weight:normal;color:#bbbbbb;"></u-input>
                    <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
                </u-form-item>
				<u-form-item class="form-row u-flex" prop="password">
					<u-input class="input" prop="password" :type="showPassword?'text':'password'" v-model="model.password" :placeholder="$t('password_new')" placeholder-style="font-weight:normal;color:#bbbbbb;"></u-input>
				</u-form-item>
                <u-button class="submit" size="default" @click="onSubmit" :style="{background:PrimaryColor}">{{$t('submit')}}</u-button>
				</u--form>
            </view>
        </view>

	</view>
</template>

<script>
var clear;
import { mapState, mapMutations } from 'vuex';
import { loginApp } from '@/config/login';
import { api_verifycode_send,api_verifycode_repwd } from '@/config/api.js';

export default {
	data() {
		return {
            readonly: false,
            codeText: this.$t('verificode_get'),
			model:{
				email: '', //号码
				vCode: '', //验证码
				password: '', //密码
			},
            showPassword: false,
			rules: {
				email: [
					{
						required: true,
						message: this.$t('email_mst'),
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.email(value);
						},
						message: this.$t('email_not'),
						trigger: ['change', 'blur']
					}
				],
				vCode: [
					{
						required: true,
						message: this.$t('verificode_input'),
						trigger: ['change', 'blur']
					},
					{
						type: 'number',
						message: this.$t('verificode_ckisnum'),
						trigger: ['change', 'blur']
					},
					{
						len: 4,
						message: this.$t('verificode_cklen'),
						trigger: ['change', 'blur']
					}
				],
				password: [
					{
						required: true,
						message: this.$t('pls_pwd'),
						trigger: ['change', 'blur']
					},
					{
						min: 6,
						max: 20,
						message: this.$t('password_lengthnot'),
						trigger: ['change', 'blur']
					},
					// {
					// 	pattern: /^[0-9a-zA-Z]*$/g,
					// 	transform(value) {
					// 		return String(value);
					// 	},
					// 	message: this.$t('passwordLetterNumber'),
					// 	trigger: ['change', 'blur']
					// }
				]
			}
		};
	},
	computed:{
	    ...mapState(['PrimaryColor','userInfo','siteInfo']),
	},
	//第一次加载
	onLoad(e) {
        
	},

	//方法
	methods: {
        onJump(url){
            uni.navigateTo({
                url:url
            })
        },
        //验证码按钮文字状态
        getCodeState() {
        	const _this = this;
        	this.readonly = true;
        	this.codeText = this.$t('againafter60seconds');
        	var s = 60;
        	clear = setInterval(() => {
        		s--;
        		_this.codeText = s + this.$t('againafterseconds');
        		if (s <= 0) {
        			clearInterval(clear);
        			_this.codeText = this.$t('verificode_get');
        			_this.readonly = false;
        		}
        	}, 1000);
        },
        //获取验证码
        getVcode(){
            console.log(this.readonly)
        	if (this.readonly==false) {
				api_verifycode_send({
					scenetype: 0,
					scenemode: 'repwd',
					email:this.model.email
				}).then(res => {
					uni.showToast({title: this.$t('verificode_sendok'),icon: 'none'});
					this.getCodeState(); //开始倒计时
				}).catch((err) =>{})
			}
        },
        // 手机号登录
        onSubmit() {
			this.$refs.uForm.validate().then(res => {
				api_verifycode_repwd({
					password: this.model.password,
					verifyCode:this.model.vCode,
					email:this.model.email
				}).then(res => {
					console.log(res)
					this.$tools.msg(this.$t('repwdok'));
					setTimeout(()=>{
						this.$tools.goJump('/pages/user/account/login/login',{},'','launch')
					},3000)
				}).catch((err) =>{})
			}).catch(errors => {})
        },
    
	},
	onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
	}
};
</script>
<style lang="scss" scoped>
.page{
    min-height: 100vh;
    background-color: #fff;
}
.f__login {
    padding: 48rpx 32rpx;
    border-radius: 18rpx 18rpx 0 0;
    z-index: 99;
    position: relative;

    .title {
        font-size: 40rpx;
        font-weight: bold;
        margin-top: 24rpx;
    }
    .desc {
        font-size: 24rpx;
        color: #666;
        margin-top: 16rpx;
    }
}
.loginPhone{
    .form-row {
        position: relative;
        line-height: 1;
        height: 140rpx;
        .input{
            font-size: 34rpx;
            line-height: 102rpx;
            height: 94rpx;
            width: 100%;
            box-sizing: border-box;
            font-size: 30rpx;
            padding: 0;
            font-weight: bold;
        }
        .getvcode {
            font-size: 26rpx;
            height: 80rpx;
            color: #333;
            line-height: 80rpx;
            background: #eee;
            min-width: 188rpx;
            text-align: center;
            border-radius: 8rpx;
            position: absolute;
            top: 46%;
            transform: translateY(-50%);
            right: 5px;
            z-index: 11;
            &.forhidden {
                background: #eee;
                color: #cccccc;
            }
        }
    }
    .submit{
        margin-top: 60rpx;
        color: #fff;
        width: 100%;
        border: none;
    }
    .agreement{
        padding-top: 24rpx;
        .icon{
            width: 36rpx;
            height: 36rpx;
            border-radius: 36rpx;
            border: 1rpx solid #eee;
            justify-content: center;
        }
        .text{
            padding-left: 10rpx;
            font-size: 26rpx;
            color: #999;
        }
        .protocol{
            font-size: 26rpx;
            color: #333;
        }
    }
}
.otherLogin{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 70rpx;
    .info{
        justify-content: space-around;
        padding: 32rpx;
    }
}
</style>
